<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				height: 2000px;
			}
			#wenzi{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<p id="wenzi">干我</p>
	</body>
	<script type="text/javascript">
		var pp = document.getElementById("wenzi");
		pp.onmousedown = function(event){
			var ev = event ||window.event;
			var disX = ev.clientX;
			var disY = ev.clientY;
			var XXX = pp.offsetLeft;
			var YYY = pp.offsetTop;
			document.body.onmousemove = function(event){
				var ev1 = event ||window.event;
				var x1 = ev1.clientX;
				var y1 = ev1.clientY;
				pp.style.left = x1 -disX + XXX + "px";
				pp.style.top = y1 - disY +YYY + "px";
			}
		}
		pp.onmouseup = function(){
			document.body.onmousemove = null;
		}
		
		
		
		
		
		
		
	</script>
</html>
